<template>
  <div class="first">
    <div id="leftNavAll">
      <!-- 左侧导航栏 -->
      <sidebar />
    </div>

    <div id="allContainer" class="second">
      <!-- 主体视图层 -->
      <div id="mainContainer">
        <keep-alive>
          <router-view v-if="$route.meta.$keepAlive"/>
        </keep-alive>
        <router-view v-if="!$route.meta.$keepAlive"/>
      </div>
    </div>
  </div>
</template>

<script>
import sidebar from "@/components/sidebar/index";
import eleColor from "@/mixins/eleColor";
import themeName from "@/mixins/themeName";
import admin from "@/util/admin";
export default {
  name: "Index",
  components: {
    sidebar
  },
  mixins: [eleColor(), themeName()],
  data() {
    return {
      // 刷新token锁
      refreshLock: false,
      // 刷新token的时间
      refreshTime: "",
      // 计时器
      timer: ""
    };
  },
  watch: {},
  created() {
    window.addEventListener("resize", this.init);
  },
  destroyed() {
    window.removeEventListener("resize", this.init);
  },
  mounted() {
    this.init();
  },
  methods: {
    // 屏幕检测
    init() {
      this.$store.commit("SET_SCREEN", admin.getScreen());
      window.onresize = () => {
        setTimeout(() => {
          this.$store.commit("SET_SCREEN", admin.getScreen());
        }, 0);
      };
    }
  }
};
</script>
<style scoped>
.slide-fade-enter-active {
  transition: all 0.3s ease;
}
.slide-fade-leave-active {
  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateX(10px);
  opacity: 0;
}
</style>
